<!-- components/login-form/login-form.vue -->
<script setup>
    import { ref } from 'vue'

    // 表单数据
    const formData = ref({
        mobile: '',
        password: '',
        alt: '',
    })
    // 表单验证规则
    const formRules = {
        mobile: {
            rules: [
                { required: true, errorMessage: '请填写手机号码' },
                {
                    pattern: '^[1][3-8][0-9]{9}$',
                    errorMessage: '手机号码格式不正确',
                },
            ],
        },
        password: {
            rules: [
                { required: true, errorMessage: '请输入密码' },
                {
                    pattern: '^[a-zA-Z0-9]{8,}$',
                    errorMessage: '密码格式不正确',
                },
            ],
        },
    }
    const ccc = ref(null)

    // 点击提交
    const onSubmit = () => {
        // this.$refs.form
        ccc.value
            .validate()
            .then((res) => {
                // 校验通过
                console.log('表单数据信息：', res)
            })
            .catch((err) => {
                console.log('表单错误信息：', err)
            })
    }
</script>

<template>
    <uni-forms ref="ccc" label-width="0" :model="formData" :rules="formRules">
        <uni-forms-item name="mobile" ref="aaa">
            <uni-easyinput
                type="text"
                :clearable="false"
                v-model="formData.mobile"
                placeholder="请输入手机号码"
                @blur="(e) => $refs.aaa.onFieldChange(e.detail.value)"
            />
        </uni-forms-item>
        <uni-forms-item name="password" ref="bbb">
            <input
                type="password"
                v-model="formData.password"
                placeholder="请输入密码"
                @blur="(e) => $refs.bbb.onFieldChange(e.detail.value)"
            />
        </uni-forms-item>
        <uni-forms-item>
            <uni-easyinput
                type="textarea"
                v-model="formData.alt"
                :clearable="false"
            />
        </uni-forms-item>
    </uni-forms>
    <button class="uni-button" type="primary" @click="onSubmit">提交</button>
</template>
